<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style> 
    #all3x img{
      max-width: 65px;
      max-height: 65px;
    }

      .chara3x{
        display: inline-block ;
        margin: 2% 3%;
        height: 90px;
        width: 70px;
        border: lightsalmon 3px solid;
        border-radius: 10px;
      }
      .chara3xnum{
        width: 65px;
        text-align:center;
        display:inline-block
      }
      .got3x{
      box-shadow:lightpink 10px -10px 10px 3px ;
      animation:got3xf 3s infinite ;
      -webkit-animation:got3xf 3s infinite  ; 
      -o-animation:got3xf 3s infinite ; 
      }
      
      @keyframes got3xf
      {
      0% {border-color:pink;}
      20%{border-color: orange;}
      40%{border-color: yellow;}
      60%{border-color: lightgreen;}
      80%{border-color: lightblue;}
      100% {border-color:lightpink;}
      }
      
      @-webkit-keyframes got3xf
      {
        0% {border-color:pink;}
      20%{border-color: orange;}
      40%{border-color: yellow;}
      60%{border-color: lightgreen;}
      80%{border-color: lightblue;}
      100% {border-color:lightpink;}
      }
      
      @-o-keyframes got3xf 
      {
        0% {border-color:pink;}
      20%{border-color: orange;}
      40%{border-color: yellow;}
      60%{border-color: lightgreen;}
      80%{border-color: lightblue;}
      100% {border-color:lightpink;}
      }
      </style>
</head>
<body>
  <div class="container">
    <div class="row clearfix" id="content">
      <div class="col-md-12 column" style="background: url('https://patchwiki.biligame.com/images/pcr/9/98/4jj2y82rjg9qywqbvgn98o42yj50p26.jpg') no-repeat;background-size: contain;">
        <div class = "panel panel-default" style="height: 500px;background-color: rgba(255, 255, 255, 0.575);border-radius: 10px;">
          <div class = "panelbody" id="gacharesult" style="border: 1px;padding: 5% 15%;"></div>
        </div>
        <div id="gachabtn" class="col-md-12 column" style="padding:0 25%;align-items: center;margin:0 5%">
          <button type="button" class="btn btn-info" id="gacha1"  style="margin: 5% 10%;">一连抽</button>
          <button type="button" class="btn btn-info" id="gacha10" style="margin: 5% 10%;">十连抽</button>
        </div>
          <div class="col-md-12 column">
            <span id="gachaset" style="color: chocolate; font-size: large;">当前奖池类型：</span>
            </div>
        <div class="col-md-12 column" style="margin-top: 3%;padding:0% 10%;border: 1px; border-radius: 10px;background-color: antiquewhite;">
          <span style="padding: 0 5%;">
            <img src="https://patchwiki.biligame.com/images/pcr/7/7c/k1k78kt1he10zz7iokv13qytvdwlozw.png" sizes="10px">花费宝石：<span id="gacha_bs" style="color: rgb(255, 159, 175);">0</span>
          </span>
          <span style="padding: 0 5%;">
            <img src="https://patchwiki.biligame.com/images/pcr/b/b4/7g6xtkqx3g00cl8wmpqf36dbxo7frsk.png" sizes="10px">获得女神的秘石：<span id="gacha_ms" style="color: rgb(206, 132, 255);">0</span>
          </span>
          <span style="padding: 0 5%;">
            <img src="https://patchwiki.biligame.com/images/pcr/d/d0/me7a9bfrf9r07uc4y1so189alf8tres.png" sizes="10px">三星出货率：<span id="gacha_chl" style="color: rgb(82, 255, 1);">0</span>%
          </span>
          <br>
          <span style="padding: 0 5%;">
            <img src="https://patchwiki.biligame.com/images/pcr/d/d0/me7a9bfrf9r07uc4y1so189alf8tres.png" sizes="10px">抽取次数：<span id="gacha_cs" style="color: rgb(80, 67, 255);">0</span>
          </span>
          <span style="padding: 0 5%;">
            <img src="https://patchwiki.biligame.com/images/pcr/d/d0/me7a9bfrf9r07uc4y1so189alf8tres.png" sizes="10px">消耗RMB：<span id="gacha_rmb" style="color: rgb(255, 102, 102);">0</span>
          </span>
          <span style="padding: 0 5%;">
            <button type="button" class="btn btn-warning" id= "reset" style="margin-left:8% ;">重置</button>
          </span>
        </div>
        <div class="col-md-12 column" id="all3x" style="border: 1px double pink;border-radius: 10px;margin-top: 10px;">

        </div>  
      </div>
    </div>
  </div>
  </div>

  
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="./js/bootstrap.min.js"></script>
  <script src="./Gacha.js"></script>
</body>

</html>